<template>
  <div>
    <!-- 1、面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 信息提示 -->
      <el-alert title="添加商品信息" type="info" show-icon center :closable="false"></el-alert>
      <!-- 步骤条 通过索引和active属性来记住激活项-->
      <el-steps :active='activeStepIndex-0' finish-status="success" align-center :space="200">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef">
        <!-- Tabs标签页 通过每一项的name属性和el-tabs的v-mode来脊柱激活的面板-->
        <el-tabs tab-position="left"  v-model="activeStepIndex" 
          :before-leave="beforeTableLeave"
          @tab-click="ClickTab">
          <el-tab-pane label="基本信息" name='0'>
            <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="addForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
                <el-input v-model="addForm.goods_price" type='number'></el-input>
            </el-form-item>
              <el-form-item label="商品重量" prop="goods_weight">
                <el-input v-model="addForm.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
                <el-input v-model="addForm.goods_number" type='number'></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat"><br>
                <el-cascader
                style="width:300px"
                  v-model="addForm.goods_cat"
                  expand-trigger="hover"
                  :options="categoriesList"
                  :props="{label:'cat_name',value:'cat_id',children:'children'}"
                  clearable
                  placeholder='可选择'
                  @change="selectedThree"></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name='1'>
            <el-form-item v-for="item in ManyParamsList" :key="item.attr_id" :label="item.attr_name"><br>
              <!-- 复选框组 -->
              <el-checkbox-group v-model="item.attr_vals">
                <el-checkbox border v-for='(item1,index) in item.attr_vals' :key="index" :label="item1"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name='2'>
            <el-form-item v-for="item in OnlyParamsList" :key="item.attr_id" :label="item.attr_name"><br>
              <!-- 每一个属性对应一个输入框 -->
              <el-input v-model="item.attr_vals">
              </el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品图片" name='3'>
            <!-- 图片上传 action表示图片要上传到的后台的API地址:绝对路径-->
            <!-- upload没有用到axios请求，而是内部自定义了一套ajax -->
            <el-upload
              :action="uploadURL"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :headers="headerObj"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name='4'>
            <!-- 富文本编辑器组件 -->
            <quill-editor v-model="addForm.goods_introduce">

            </quill-editor>
            <el-button type="primary" style="margin-top:10px" @click="add">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
    
    <!-- 3.0 对话框 -->
    <!-- 预览图片时的对话框 -->
    <el-dialog 
      title="预览图片" 
      :visible.sync="photoDialogIsVisible" 
      width="500px">
        <img :src="photoUrl" alt="" width="100%" style="border:1px solid black">
    </el-dialog>
  </div>
</template>


<script>
import _ from 'lodash';

export default {
  data(){
    return {
      // 默认的步骤条，number型
      activeStepIndex:'0',

      // 添加商品的表单数据的校验规则
      addFormRules:{
        goods_name:[{ required: true, message: '请输入商品名称', trigger: 'blur' },],
        goods_price:[{ required: true, message: '请输入商品价格', trigger: 'blur' },],
        goods_weight:[{ required: true, message: '请输入商品重量', trigger: 'blur' },],
        goods_number:[{ required: true, message: '请输入商品数量', trigger: 'blur' },],
        goods_cat:[{ required: true, message: '请选择商品分类', trigger: 'change' },],
      },
      // 商品分类
      categoriesList:[],
      // 添加商品的表单数据对象
      addForm:{
        // 1.0 基本信息
        goods_name:'',
        goods_price:'',
        goods_weight:'',
        goods_number:'',
        //级联选择框选中的id集合,以为','分割的分类列表
        goods_cat:[],
        //4.0 图片的临时存放路径
        pics:[],
        //5.0 商品内容：商品的详情描述
        goods_introduce:'',

        // 商品的参数（数组），包含 `动态参数` 和 `静态属性`
        attrs:[],
      },
      //2.0 商品参数 - 动态
        ManyParamsList:[
          // {
          //   attr_id: 3077,
          //   attr_name: "版式",
          //   attr_sel: "many",
          //   attr_vals: "49吋4K超薄曲面 人工智能,55吋4K观影曲面 30核HDR,55吋4K超薄曲面 人工智能,65吋4K超薄曲面 人工智能",
          //   attr_write: "list",
          //   cat_id: 6,
          //   delete_time: null,
          // },
        ],
        //3.0 商品属性 - 静态
        OnlyParamsList:[
          // {
          //   attr_id: 3068,
          //   attr_name: "主体-商品名称",
          //   attr_sel: "only",
          //   attr_vals: "TCL电视 55A950C",
          //   attr_write: "manual",
          //   cat_id: 6,
          //   delete_time: null,
          // },
        ],
        //4.0 商品图片
        // 图片上传的后台API地址
        uploadURL:'http://127.0.0.1:8888/api/private/v1/upload',
        // 图片上传的请求头对象，为他配置token
        headerObj:{
          Authorization : window.sessionStorage.getItem('token'),
        },
        // 点击预览图片时的对话框是否显示
        photoDialogIsVisible:false,
        // 预览图片的绝对路径
        photoUrl:'',
    }
  },
  methods:{
      // 获取所有商品分类数据列表
      async getCategoriesList(){
          const res = await this.$http.get('categories');
          // console.log('商品分类列表：',res.data);
          if(res.data.meta.status!==200) return;

          this.categoriesList=res.data.data;
      },
      // 限制只允许选择三级分类
      selectedThree(){
          if(this.addForm.goods_cat.length!==3)
          {
            this.addForm.goods_cat=[];
            return;
          }
      },
      //每次切换标签页的面板都会触发
      beforeTableLeave(activeName,oldActiveName){
          console.log('将要离开的面板名字：',oldActiveName);
          console.log('将要进入的面板名字：',activeName);
          
          //只要返回的是false，点击切换面板就不会成功
          if(this.activeStepIndex==='0'&&this.addForm.goods_cat.length!==3){
            this.$message.error('请选择商品分类！');
            return false;
          }
      },
      // 获取动态参数
      async getManyParams(){
          const res = await this.$http.get(`categories/${this.addForm.goods_cat[2]}/attributes`,{params:{sel:'many'}});
          console.log('动态参数：',res.data);
          if(res.data.meta.status!=200)  return;
          this.ManyParamsList=res.data.data;

          this.ManyParamsList.forEach(item=>{
            if(item.attr_vals==''){
              item.attr_vals=[];
            }
            else{
              item.attr_vals=item.attr_vals.split(' ');
            }
            // console.log('数组：',item.attr_vals);
          })
      },
      // 获取静态属性
      async getOnlyParams(){
          const res = await this.$http.get(`categories/${this.addForm.goods_cat[2]}/attributes`,{params:{sel:'only'}});
          // console.log('静态属性：',res.data);
          if(res.data.meta.status!=200)  return;
          this.OnlyParamsList=res.data.data;

      },
      // 点击Tabs标签页的每个面板都会触发
      ClickTab(){
          // 商品参数，动态
          if(this.activeStepIndex=='1'){
            this.getManyParams();
            return;
          }
          //商品属性,静态
          if(this.activeStepIndex=='2')
          {
            this.getOnlyParams();
            return;
          }
      },

      //处理图片的预览效果，点击图片预览时触发
      handlePreview(file){
          this.photoDialogIsVisible=true;
          console.log('图片预览：',file.response);
          if(file.response.meta.status!=200) return;
          this.photoUrl=file.response.data.url;
      },
      //处理图片的移除效果，移除文件时触发
      handleRemove(file){
          // 从pics数组中删除这张图片的临时路径
          // console.log('点击移除图片时：',file.response);
          if(file.response.meta.status!=200) return;
          // 1.0 找到要删除的图片
          let path=file.response.data.tmp_path;
          // 2.0 找到要删除图片的索引值
          let index=this.addForm.pics.findIndex(x=>x.pic==path);
          // console.log('index:',index);
          // 3.0 更拘束租的splice方法删除这个图片的信息
          this.addForm.pics.splice(index,1);
          console.log('删除图片后的图片路径数组:',this.addForm.pics);
      },
      //处理上传成功后的数据,上传成功时触发
      handleSuccess(response){
        // console.log('response:',response);
        if(response.meta.status!=200) return;
        //1.0 先合成存放临时图片路径的对象
        let obj={"pic":response.data.tmp_path}
        //2.0 将对象加到数组中
        this.addForm.pics.push(obj);
        console.log('上传一张图片时的图片路径数组：',this.addForm.pics);
      },
      // 添加商品
      add(){
        // 表单预验证
        this.$refs.addFormRef.validate(async valid=>{
          if(!valid) return this.$message.error('请填写必要的表单项！')

          // 预验证通过
          // 要求1： goods_cat使用,把1、2、3级分割的字符串
            // 如果直接把数组转为字符串，级联选择器需要的是数组，则会报错
            // this.addForm.goods_cat.join(',');   错误的
            // 深拷贝一份，与原对象互不干扰   lodash的cloneDeep(obj)
            let addObj=_.cloneDeep(this.addForm);
            addObj.goods_cat=addObj.goods_cat.join(',');
            
          // 要求2： 处理attrs数组  处理动态参数和静态属性
          this.ManyParamsList.forEach(item=>{
              const newInfo={
                "attr_id":item.attr_id,
                "attr_value":item.attr_vals.join(' '),
              }
              this.addForm.attrs.push(newInfo);
          })
          this.OnlyParamsList.forEach(item=>{
              const newInfo={
                "attr_id":item.attr_id,
                "attr_value":item.attr_vals,
              }
              this.addForm.attrs.push(newInfo);
          })
          addObj.attrs=this.addForm.attrs;
          
          // console.log('addObj:',addObj);
          const res = await this.$http.post('goods',addObj);
          console.log('添加商品：',res.data);
          if(res.data.meta.status!==201) return this.$message.error('添加商品失败！');

          this.$message.success('添加商品成功！');

          this.$router.push('/goods');        

        })
      }

  },
  created(){
    this.getCategoriesList();
  }
  
}
</script>

<style scoped>
  .el-card {
    width: 100%;
    margin-top: 10px;
    box-shadow: 0px 0px 3px skyblue;
    background-color: #FBFEFB;
  }
  .el-alert{
    height: 28px;
    border-radius: 10px;
  }

  .el-steps{
    margin: 15px auto;
  }

  .el-checkbox{
    margin: 0px 5px 0px 0px !important;
  }
</style>